<template>
    <el-dialog
        :title='type'
        :visible.sync="showIf"
        @open='handleOpen'
        :lock-scroll='false'
        @close="$emit('update:dialogShowIf', false)"
        top='3vh'>
        
        <section class='classID' v-if='type==="部门"'>
            集合ID {{setid}}
        </section>

        <section class="search">
          <el-input
              :on-icon-click='handleIconClick'
              @keyup.enter.native='handleIconClick'
              style="width:85%" 
              icon="search"
              v-model='serachVal'
            ></el-input>
          <h4>搜索结果只显示前300 当前250</h4>
        </section>

        <section class="table">
          <el-table
          :data="tableData"
          @row-click='handleRowClick'
           max-height='350'
           class='employRoster-dialog-table'
           style="width: 100%">

            <el-table-column
                v-for='(k,i) in tableOption'
                :prop='k.prop'
                :label='k.label'
                :width='k.width'
                class-name='column'
                >
            </el-table-column>
            
          </el-table>

        </section>
    </el-dialog>
</template>

<script>
import Vue from "vue";
import { Dialog } from "element-ui";
Vue.use(Dialog)

export default {
  data () {
    let that = this;
    return {
      showIf: this.dialogShowIf,
      tableOption: [],
      tableData: [],
      serachVal: ''
    }
  },
  props: {
    dialogShowIf: {
      type: Boolean,
      default: false
    },
    title: {
      default: '提示'
    },
    setid: {
      default: ''
    },
    type: {
      default: ''
    },
    bh: {
      default: ''
    }
  },

  watch: {
    dialogShowIf (newValue, oldValue) {
      this.showIf = this.dialogShowIf
    }
  },



  methods: {
    handleOpen () {
      this.serachVal = ''
      this.tableOption = []
      this.handleIconClick()
    },
    handleClose () {
      this.$emit('update:dialogShowIf', false)
    },
    handleIconClick () {

      switch (this.type) {
        case '部门':
          this.setBUMENtable()
          break;

        case '发薪组织':
          this.setFAXINZUZHItable()
          break;

        case '员工ID':
          this.setYUANGONGIDtable()
          break;

        case '职务副职责':
          this.setZHIWUFUZHIZEtable()
          break;


        default:
          break;
      }
    },

    getParams ({ pageNum = 1, pageSize = 300, q = this.serachVal, bh } = {}) {
      let params = { pageNum, pageSize, q }
      if (bh) params.bh = bh

      return params
    },

    setBUMENtable () {


      let params = {
        setid: this.setid,
        q: this.serachVal
      }

      this.Axios
        .Post(this.URL.getDeptList.url, params)
        .then((res) => {
          this.tableData = res.data.datas && res.data.datas.deptList
          if (this.tableData == []) return
          this.tableOption = [
            {
              label: '部门编号',
              prop: 'deptid',
              width: '100'
            }, {
              label: '部门',
              prop: 'descrshort',
              width: '200'

            }, {
              label: '部门全称',
              prop: 'descr'
            }
          ]
        })

    },
    setFAXINZUZHItable () {

      this.Axios
        .Post(this.URL.getSalaryOrgList.url, this.getParams())
        .then((res) => {
          let datas = res.data.datas
          this.tableData = datas && datas.showList
          if (this.tableData == []) return
          this.tableOption = [
            {
              label: '编号',
              prop: 'company',
              width: '160'
            },
            {
              label: '公司',
              prop: 'com_desc',
            }
          ]
        })


    },

    setYUANGONGIDtable () {

      this.Axios
        .Post(this.URL.getEmployeeId.url, this.getParams())
        .then((res) => {
          let datas = res.data.datas
          this.tableData = datas && datas.showList

          if (this.tableData == []) return

          this.tableOption = [
            {
              label: '编号',
              prop: 'emplid',
              width: '140'
            },
            {
              label: '姓名',
              prop: 'name',
              width: '120'
            },
            {
              label: '部门',
              prop: 'dept_descr',
            }
          ]
        })
    },
    setZHIWUFUZHIZEtable () {

      this.Axios
        .Post(this.URL.getJobSubFunList.url, this.getParams({ bh: this.bh }))
        .then((res) => {
          let datas = res.data.datas
          this.tableData = datas && datas.showList

          if (this.tableData == []) return

          this.tableOption = [
            {
              label: '编号',
              prop: 'job_sub_func',
              width: '150'
            },
            {
              label: '类别',
              prop: 'job_sub_func_desc'
            }
          ]
        }

        )
    },
    handleRowClick (row, column, event) {

      switch (this.type) {

        case '部门':
          this.handleBUMENselect(row)
          break;

        case '发薪组织':
          this.handleFAXINZUZHIselect(row)
          break;

        case '员工ID':
          this.handleYUANGONGIDselect(row)
        break;

        case '职务副职责':
          this.handleZHIWUFUZHIZEselect(row)
          break;


        default:
          break;
      }

      this.handleClose()

    },
    handleFAXINZUZHIselect (data) {
      let { company: id, com_desc: info } = data
      let result = { id, info }
      this.$emit('formTop_three', result)
    },
    handleBUMENselect (data) {
      let { deptid: id, descr: info } = data
      let result = { id, info }
      this.$emit('formTop_two', result)
    },

    handleYUANGONGIDselect (data) {
      let { emplid: id, name: info } = data
      let result = { id, info }
      this.$emit('formBottom_one_left', result)
    },
    handleZHIWUFUZHIZEselect (data) {
      let { job_sub_func: id, job_sub_func_desc: info } = data
      let result = { id, info }
      this.$emit('formBottom_six_right', result)
    }
  },

  mounted () {
  },


}
</script>

<style lang='less'>
.classID {
  text-align: center;
  color: #56aadd;
  margin-top: -12px;
  margin-bottom: 12px;
  font-size: 15px;
}
.employRoster-dialog-table {
  .el-table__body-wrapper {
    .column {
      cursor: pointer !important;
    }

    .el-table__row:hover {
      color: #20a0ff !important;
    }
  }
}

.search {
  text-align: center;
  h4 {
    padding: 15px 0;
    color: rgb(195, 200, 200);
    font-size: 12px;
    font-weight: normal;
  }
}
</style>